【CSS】border-color - 境界線の色

CSSのborder-colorプロパティについて解説します。

検証環境

CSS

macOS

14.1

border-color

border-colorは“境界線の色”のプロパティです。

上下左右の境界線の色を一括で設定します。

個別に設定するには、border-top-color、border-bottom-color、border-left-color、border-right-colorを使用します。

【CSS】border-top-color - 境界線（上）の色

【CSS】border-bottom-color - 境界線（下）の色

【CSS】border-left-color - 境界線（左）の色

【CSS】border-right-color - 境界線（右）の色

基本構文

４パターンの基本的な構文があり、それぞれ値の個数が異なります。

全て（値：１個）

値が１つの場合、全て（上下左右）の境界線に適用します。

border-color: 値;

上下・左右（値：２個）

値が２つの場合、値1は上下、値2は左右の境界線に適用します。

border-color: 値1 値2;

上・左右・下（値：３個）

値が３つの場合、値1は上、値2は左右、値3は下の境界線に適用します。

border-color: 値1 値2 値3;

上・右・下・左（値：４個）

値が４つの場合、値1は上、値2は右、値3は下、値4は左の境界線に適用します。

border-color: 値1 値2 値3 値4;

サンプル

全て

sample.html

<style>
p {
    border-style: solid;
    ___ih_hl_start
    border-color: red;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー

上下・左右

sample.html

<style>
p {
    border-style: solid;
    ___ih_hl_start
    border-color: red blue;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー

上・左右・下

sample.html

<style>
p {
    border-style: solid;
    ___ih_hl_start
    border-color: red blue green;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー

上・右・下・左

sample.html

<style>
p {
    border-style: solid;
    ___ih_hl_start
    border-color: red blue green orange;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー